<template>
    <div>
        <div class="art_item">
            <articleItem :item="artDetail" type="whoSeeMe"></articleItem>
        </div>
        <div class="saw_list">
            <div class="saw_item" v-for="(item, index) in list" :key="index">
                <div class="saw_user">
                    <image :src="item.headImg" mode="" />
                    <div class="user_info">
                        <div>{{item.userName}}</div>
                        <p>
                            {{item.formatTime}}从
                            <span>{{item.opFrom}}</span>
                            打开，看了
                            <span>{{item.stayTime}}</span>
                        </p>
                    </div>
                    <div class="copy_nick" @click="copyNick(item.userName)">复制昵称</div>
                </div>
                <div class="source_user">
                    <div v-for="(i, idx) in item.shareLinks" :key="idx">
                        <div class="user_item">
                            <div class="img">
                                <image :src="i.headImg" mode="" />
                            </div>
                            <p class="overflow">{{i.userName}}</p>
                        </div>
                        <i v-if="idx < (item.shareLinks.length - 1)" class="icon-arrow-right fs22 color-ccc"></i>
                    </div>
                </div>
            </div>
            <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
        </div>
    </div>
</template>

<script>
import articleItem from '@/components/pages/article-item.vue'
import { getViewRefViewerList, getViewerDynamicHis } from '@/request/user'
import { timestampToLocalDayPlus, timestampToCountdown } from '@/utils/functions'

export default {
    components: {
        articleItem
    },
    data() {
        return {
            userId: '',
            teamId: '',
            dynamicId: '',
            artDetail: {},
            list: [],
            scroll: {
                page: 1,
                size: 30,
                loading: false,
                max: false,
                noData: false,
            },
        }
    },
    onReachBottom() {
        this.onInfinite()
    },
    onLoad({ dynamicId, userId, teamId }) {
        this.userId = userId
        this.teamId = teamId
        this.dynamicId = dynamicId
        this.getItemDetail()
        this.onRefresh()
    },
    methods: {
        getItemDetail() {
            getViewerDynamicHis({
                dynamicId: this.dynamicId,
                viewerId: this.userId,
                teamId: this.teamId,
            }).then(res => {
                this.artDetail = res.data.list[0]
            })

        },
        getList(complete) {
            getViewRefViewerList({
                userId: this.userId,
                teamId: this.teamId,
                dynamicId: this.dynamicId,
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
            }, { complete }).then(res => {
                res.data.list.forEach(item => {
                    item.formatTime = timestampToLocalDayPlus(item.createTime)
                    item.stayTime = timestampToCountdown( item.leaveTime.toDate() - item.createTime.toDate() , 'mm分ss秒')
                    item.stayTime = item.stayTime.replace('00分', '')
                    item.stayTime = item.stayTime.replace('00秒', '小于5秒')
                })
                this.list = this.scroll.page == 1 ? res.data.list : this.list.concat(res.data.list)
                this.scroll.max = this.list.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.list = []
            this.getList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getList(() => {
                this.scroll.loading = false
            })
        },
        copyNick(data) {
            uni.setClipboardData({
                data,
                success: () => {
                    this.$interact.toast('复制成功')
                }
            })
        }
    }

}
</script>

<style lang="less" scoped>
.art_item{
    background-color: #fff;
    padding: 30rpx 30rpx 10rpx;
    border-bottom: 1px solid #ddd;
}

.saw_list{
    padding: 30rpx;
    .saw_item{
        width: 100%;
        background: #fff;
        border-radius: 10rpx;
        margin-bottom: 20rpx;
        .saw_user{
            display: flex;
            align-items: center;
            padding: 50rpx 20rpx;
            border-bottom: 1px solid #ddd;
            position: relative;
            image{
                flex-shrink: 0;
                width: 96rpx;
                height: 96rpx;
                margin-right: 20rpx;
                border-radius: 50%;
            }
            .user_info{
                flex: 1;
                >div{
                    font-size: 34rpx;
                }
                >p{
                    font-size: 26rpx;
                    margin-top: 20rpx;
                    color: #aaa;
                    span{
                        color: #000;
                        margin: 0 5rpx;
                    }
                }
            }
            .copy_nick{
                position: absolute;
                right: 20rpx;
                top: 40rpx;
                width: 140rpx;
                height: 50rpx;
                .align(center);
                color: #fff;
                border-radius: 30rpx;
                font-size: 26rpx;
                background-color: #e02e42;
                box-shadow: 0 0 10rpx 0 rgba(224,46,66,.3);
            }

        }
        .source_user{
            display: flex;
            padding: 40rpx 0;
            flex-wrap: wrap;
            >div{
                display: flex;
                align-items: center;
                margin-bottom: 20rpx;
            }
            .user_item{
                width: 120rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                .img{
                    width: 72rpx;
                    height: 72rpx;
                    border-radius: 50%;
                    .align(center);
                    &.border{
                        border: 1rpx solid @mainColor;
                    }
                    image{
                        width: 60rpx;
                        height: 60rpx;
                        border-radius: 50%;
                    }
                }
                p{
                    font-size: 24rpx;
                    text-align: center;
                    color: #666;
                    margin-top: 10rpx;
                    width: 100%;
                    .overflow();
                }
            }
        }
    }
}


</style>